<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用动画方法</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>这是文字段落1</p>
    <p>这是文字段落2</p>
    <p>这是文字段落3</p>
    <p>这是文字段落4</p>
    <p>这是文字段落5</p>
    <button id="btn1">全部隐藏</button>
    <button id="btn2">全部显示</button>
    <button id="btn3">以淡入淡出方式切换，速度慢</button>
    <button id="btn4">以卷帘收起方式隐藏第3个段落，速度500</button>
    <button id="btn5">将第2个段落切换至透明度0.3，回调函数弹窗显示“第2个段落透明度已切换至0.3”</button>
  <script>
    $(function(){//请在此行后编写代码
        $('#btn1').click(function(){
            $('p').hide()
        })

        $('#btn2').click(function(){
            $('p').show()
        })

        $('#btn3').click(function(){
            $('p').fadeToggle('slow')
        })

        $('#btn4').click(function(){
            $('p').eq(2).slideUp(500)
        })

        $('#btn5').click(function(){
            $('p').eq(1).animate({opacity:'0.3'},function(){
                alert("第2个段落透明度已切换至0.3")
            })
        })
    });

    
  </script>
</body>
</html>
